<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>shadow</title>
</head>
<body>
    <p>hello world</p>
    <div id="myShadow"></div>
    <script>
        let shadowDOM= document.getElementById("myShadow").attachShadow({
            mode:'open' // open  closed
        });
        let PElm=document.createElement("p");
        PElm.innerHTML="hello shadow";
        PElm.id="myID";
        let styleElm= document.createElement("style");
        styleElm.textContent=`
            p{color:red}
        `;
        shadowDOM.appendChild(styleElm);
        shadowDOM.appendChild(PElm);

        var bb=document.getElementById("myShadow").shadowRoot; // mode=open才能拿得到
    </script>
    <script>
        var cc=document.getElementById("myShadow").shadowRoot;
        console.log(cc);
    </script>
        <script>
            var dd=document.getElementById("myID");
            console.log(dd);
        </script>
</body>
</html>